<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
		<block>
			<view class="cartBox">
				<view class="cartList">
					<view class="plotAddress">
						<text>个人地址</text>
						<view class="plotAddressBorder" @tap="getaddress">
							<view>
								<image src="../../static/images/home/weizhi.png" class="icon_next" mode=""></image>
								<text style="margin-left: 10rpx;">{{getAddress}}</text>
							</view>
							<view>
								<image src="../../static/images/mine/icon_next.png" class="icon_next"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="cartBox">
				<!-- cartList -->
				<view class="">
					<view class="cartListItem" v-for="(item,index) in shopList" :key="item.id">
						<view class="imgBox">
							<image :src="imgapi+item.avatar" mode="" style="width: 75px;height: 75px;margin-top: 6px;">
							</image>
						</view>
						<view class="rightBox">
							<view style="text-align: left;">
								{{item.title}}
							</view>
							<view class="food-btm">
								<text class="food-price">￥{{item.price}}</text>
								<text>x{{item.count}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="cartBottom">
				<view class="allcount">总计:<text class="food-price" style="margin-left: 10rpx;">￥{{totalPrice}}</text></view>
				<view class="rightbot">
					<view class="settlementBox" @click="subOrder">提交订单</view>
				</view>
			</view>
		</block>
		</skeleton>
	</view>
</template>

<script>
	import numSelect from '@/pageA/uni_modules/poiuy-numSelect/numSelect.vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	export default {
		components: {
			numSelect,
			Skeleton
		},
		data() {
			return {
				form: {
					id: "",
					amount: 0.0,
					img: [],
					remark: "",
					payWay: ""
				},
				getAddress: '请选择您的收货地址',
				base64Arr: [],
				shopList: [],
				product: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				weight: null,
				base64arr: [],
				checked: false,
				imgapi: "",
				mark: '',
				totalPrice: 0.00, //总价
				type: null,
				province: '',
				city: '',
				area: '',
				address: '',
				name: '',
				phone: '',
				
				loading: true,
				skeleton: [
					'line*2',
					'square+line*2',
					'square+line*2',
					'square+line*2',
				], //骨架屏
			}
		},
		onLoad(e) {
			this.imgapi = this.$reqConfig.URLIMAGE
			let itemArr = JSON.parse(e.item)
			console.log('==', itemArr)
			this.shopList = itemArr
			
			let totalPrice = 0
			this.shopList.forEach(item => {
				totalPrice += (item.price * item.count)
			})
			console.log('totalPrice', totalPrice.toFixed(2))
			this.totalPrice = totalPrice.toFixed(2)
			
			// 骨架屏取消
			this.loading = false;
		},
		methods: {
			//单选事件
			payWay(e) {
				console.log(e.detail.value)
				this.form.payWay = e.detail.value
			},
			getaddress() {
				let that = this
				wx.chooseAddress({
					success(res) {
						that.province = res.provinceName
						that.city = res.cityName
						that.area = res.countyName
						that.address = res.detailInfo
						that.name = res.userName
						that.phone = res.telNumber
						that.getAddress = that.province + that.city + that.area + that.address
					}
				})
			},
			//提交订单，点击提交订单按钮的时候加一个加载图标的全局遮罩，等请求完成后再放开
			subOrder() {
				if (!this.province) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				uni.showLoading({
					title: "订单提交中"
				})
				let shopCarArr = []
				this.shopList.forEach(item => {
					if(item.type==1){
						let obj = {
							shopCarId: item.id,
							count: item.count,
							id: item.goodsId
						}
						shopCarArr.push(obj)
					}else{
						let obj = {
							shopCarId: item.id,
							count: item.count,
							id: item.goodsId,
							merchantId:uni.getStorageSync("merchantId")
						}
						shopCarArr.push(obj)
					}
					
				})
				console.log('shopCarArr', shopCarArr)
				this.$axios({
					url: `/user/shopMall/settlement`,
					method: "post",
					data: {
						shopCar: JSON.stringify(shopCarArr),
						province: this.province,
						city: this.city,
						area: this.area,
						address: this.address,
						name: this.name,
						phone: this.phone
					}
				}).then((res) => {
					uni.hideLoading()
					uni.redirectTo({
						url:'../mine/shopOrder'
					})
				})
			},
			count(e) {
				this.form.amount = e
				//保留2位
				// this.totalPrice = (this.form.amount * this.product.price).toFixed(2)
			},
			checkeds() {
				this.checked = !this.checked
			}
		}
	}
</script>

<style scoped>
	.plotAddress {
		margin: 15rpx 15rpx 25rpx;
		font-size: 13px;
		text-align: left;
		/* color: #777777; */
	}

	.cartListItem {
		width: 89vw;
		margin: 10rpx auto;
		height: calc(22vw + 34rpx);
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, .1);
		overflow: hidden;
		border: 0;
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 20rpx;
	}

	.rightBox {
		height: 22vw;
		width: 100%;
		padding-right: 15rpx;
		position: relative;
		display: flex;
		flex-flow: column; //垂直排列
		justify-content: space-between; //两端对齐
	}

	.food-btm {
		justify-content: space-between;
		display: flex;
		flex-direction: row;
	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.cartBox {
		width: 750rpx;
		text-align: center;
		margin-top: 15rpx;
	}

	.cartBoxBot {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 15rpx 25rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
	}

	.icon_next {
		width: 30rpx;
		height: 30rpx;
		margin-top: 7rpx;
	}

	.plotAddressBorder {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
	}

	.cartBoxBot2 {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 15rpx 25rpx;
		/* padding-top:20rpx; */
	}

	.cartList {
		width: 89vw;
		margin: 10rpx auto;
		/* height: calc(22vw + 34rpx); */
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, .1);
		overflow: hidden;
		border: 0;
		position: relative;
		margin-bottom: 20rpx;
	}

	.phoFlex {
		display: flex;
		margin-left: 20rpx;
	}

	.checkboxBox {
		padding-left: 16rpx;
		flex-shrink: 0;
		height: 22vw;
		line-height: 22vw;
		margin-right: 16rpx;
		align-items: center;
		position: relative;
		width: 30rpx;
	}

	.imgBox {
		width: 22vw;
		height: 22vw;
		flex-shrink: 0;
		margin-left: 15rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 10rpx;
		position: relative;
	}



	.cartBottom {
		padding-left: 20rpx;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 11vw;
		display: flex;
		align-items: center;
	}

	.allcount {
		color: #C4C4C4;
		margin-left: 20rpx;
	}

	.delBox {
		height: 9vw;
		width: 120rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #C4C4C4;
	}

	.settlementBox {
		height: 9vw;
		width: 180rpx;
		padding: 0 50rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #3cc51f;

	}

	.rightbot {
		margin-right: 15rpx;
		position: absolute;
		right: 0;
		display: flex;
	}

	.photoBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 680rpx;
		height: 130rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
	}
</style>
